import React, { Component, useState } from 'react';
import { connect } from 'react-redux';
import { Upload, message, Form } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import Store from "../../../store";
import action from "../../../store/action";

const Upload_table = ({ src = {}, onChange },props) => {
    const [storeState,setStoreState]=useState(Store.getState())
    const [imageUrl, setImageUrl] = useState(false);
    const [loaDing, setLoading] = useState(false);
    const store_img=storeState.custom.Dynamic_edit_arr==true?storeState.custom.dynamic_EditData[0].coverPicPath:null;
    const triggerChange = changedValue => {
        if (onChange) {
            onChange({
                imageUrl,
                ...src,
                ...changedValue,
            });
        }
    };

    const handleChange = info => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
          let newImgUrl=info.file.response.message
            // newImgUrl=newImgUrl.replace('/','');
            if(!(imageUrl in src)){
                setImageUrl(newImgUrl)
                
            }
            
            triggerChange({
                imageUrl:newImgUrl
            })
       
            
        }
    };
    const beforeUpload = (file) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
    }
    const uploadButton = (
        <div>
            {loaDing ? <LoadingOutlined /> : <PlusOutlined />}
            <div className="ant-upload-text">Upload</div>
        </div>
    );
    return (
        <span>
            <Upload
                name="article"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="http://www.bestzc.cn:8080/materials.web/common/api/uploadFile2"
                beforeUpload={beforeUpload}
                onChange={handleChange}
                src={src.imageUrl || imageUrl}
            >
                {imageUrl ? <img src={imageUrl} alt="article" style={{ width: '100%' }} /> : storeState.custom.Dynamic_edit_arr==true?<img src={store_img} alt="article" style={{ width: '100%' }} />:uploadButton}
            </Upload>
        </span>
    );
};
class index extends React.Component {
    constructor() {
        super();
        this.state = {
            loading: false,
        };
    }
    render() {
        return <Form.Item label="图片" name="img_url" initialValue={this.props.dynamic_EditData[0]!=undefined?this.props.dynamic_EditData[0].coverPicPath:''}>
            <Upload_table onChange={()=>this.upload_img}/>
        </Form.Item>
    };
   upload_img=()=>{
      if(this.props.upload_img===false){
        const {edit_img}=this.props;
        edit_img()
        
      }
   }
}

export default connect(state=>({...state.custom}),action.custom)(index);